﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Context Menu - CheckBox and Radio Button</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../../css/samples.css" />
    <link rel="stylesheet" href="../../../css/integralui.contextmenu.css" />
    <link rel="stylesheet" href="../../../css/themes/theme-flat-blue.css" />
    <script type="text/javascript" src="../../../external/angular.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.contextmenu.min.js"></script>
    <script type="text/javascript">
        angular
            .module("appModule", ["integralui"])
            .controller("appCtrl", function($scope){
                $scope.menuName = "menuSample";

                $scope.fontWeight = 'bold';
                $scope.fontStyle = 'normal';
                $scope.fontSize = '1';
                $scope.textDecoration = 'none';

                $scope.data = [
                    { id: 1, text: "Font Menu", type: "header" },
                    { id: 2, text: "Bold", icon: 'icons-medium check-mark', checked: true },
                    { id: 3, text: "Italic" },
                    { id: 4, text: "Strikethrough" },
                    { id: 5, type: "separator" },
                    { id: 6, text: "x1", icon: 'icons-medium radio-mark-filled' },
                    { id: 7, text: "x1.5", icon: 'icons-medium radio-mark-empty' },
                    { id: 8, text: "x2", icon: 'icons-medium radio-mark-empty' }
                ];


                $scope.menuOptions = {
                    itemIcon: 'icons-medium empty',
                    items: $scope.data,
                    itemClick: function(e){
                        if (e.item){
                            if (e.item.id < 5)
                                e.item.checked = e.item.checked != undefined ? !e.item.checked : true;
                            else
                                e.item.checked = true;

                            switch (e.item.id){
                                case 2: 
                                    $scope.fontWeight = e.item.checked != false ? 'bold' : 'normal';
                                    break;
                                case 3: 
                                    $scope.fontStyle = e.item.checked != false ? 'italic' : 'normal';
                                    break;
                                case 4: 
                                    $scope.textDecoration = e.item.checked != false ? 'line-through' : 'none';
                                    break;
                                case 6: 
                                    $scope.fontSize = e.item.checked != false ? '1' : '1';
                                    break;
                                case 7: 
                                    $scope.fontSize = e.item.checked != false ? '1.5' : '1';
                                    break;
                                case 8: 
                                    $scope.fontSize = e.item.checked != false ? '2' : '1';
                                    break;
                            }

                            if (e.item.id < 5)
                                e.item.icon = e.item.checked != false ? 'icons-medium check-mark' : 'icons-medium empty';
                            else {
                                for (var i = 5; i < $scope.data.length; i++){
                                    if ($scope.data[i] != e.item)
                                        $scope.data[i].checked = false;

                                   $scope.data[i].icon = $scope.data[i].checked != false ? 'icons-medium radio-mark-filled' : 'icons-medium radio-mark-empty';
                                }
                            }

                            $scope.$apply();
                        }
                    }
                }
            });
    </script>
    <style type="text/css">
        .block
        {
            background: white;
            border: thin solid gray;
            width: 600px;
            height: 300px;
        }
        .block span
        {
            color: #808080;
            cursor: default;
            display: block;
            margin: 130px auto;
            text-align: center;
        }
        .icons-medium
        {
            margin: 0 7px 0 0;
        }
        .iui-contextmenu-item
        {
            width: 150px;
        }
        .icons-medium
        {
            margin: 0 7px 0 1px;
        }
        .check-mark
        {
            background-position: -192px -120px;
        }
        .radio-mark-empty
        {
            background-position: -192px -144px;
        }
        .radio-mark-filled
        {
            background-position: -216px -144px;
        }
    </style>
</head>
<body>
	<div class="header">
        <div class="header-content">
		    <h1><span style="color:#c60d0d">IntegralUI</span> Studio <span style="font-size:0.75em; font-style:italic">for Web</span></h1>
        </div>
        <hr class="head-separator" />
    </div>
    <div class="content" ng-app="appModule">
        <div class="feature" ng-controller="appCtrl">
	        <h2 class="feature-title">Context Menu / CheckBox and Radio Button</h2>
	        <div class="feature-content">
                <div class="block" iui-contextmenu="menuOptions" iui-style="font-weight:{{fontWeight}};font-style:{{fontStyle}};font-size:{{fontSize}}em;text-decoration:{{textDecoration}}">
                    <span>Right click to open the context menu</span>
                </div>
	            <div class="feature-help">
                    <p><span class="initial-space"></span>An example that shows how to use the placeholder for the item icon in ContextMenu to display a checkbox or radio button.</p>
                    <p><span class="initial-space"></span>We have a simple context menu with options that allows you to change the font settings for a div element to which the context menu is attached.</p>
                    <p style="padding-bottom:30px"><span class="initial-space"></span>For more information check out the source code of this sample.</p>
	            </div>
            </div>
        </div>
    </div>
</body>
</html>
